import React, { lazy } from 'react'
import Home from '../views/Home'
import { Navigate } from 'react-router-dom'
import Login from '../views/Login'
import Register from '@/views/Register';

const Page301 = lazy(() => import('../views/Page3'));
const Page1 = lazy(() => import('../views/Page1'));
const Page2 = lazy(() => import('../views/Page2'));


const withLoading = (comp:JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)

const routes = [
    {
        path: '/',
        element: <Navigate to="/page1" />
    },
    {
        path: '/',
        element: <Home />,
        children: [
            {
                path: '/page1',
                element: withLoading(<Page1 />)
            },
            {
                path: '/page2',
                element: withLoading(<Page2 />)
            },
            {
                path: '/page3/page301',
                element: withLoading(<Page301 />)
            },
        ]
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/register',
        element: <Register />
    },
    {
        path: '*',
        element: <Navigate to="/page1" />
    }
]
export default routes;